<template>
  <div class='record'>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input v-model="SearchOrderVo.loginAccount" placeholder="请输入登录账号"></el-input>
      </el-col>
      <el-col :span="4" style="text-align: left">
        <el-button type="primary" @click="searchRecordByConditions" icon="el-icon-search">查询</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="RecordList" stripe style="width: 100%" height="550" v-loading="loading">
      <el-table-column type="index" width="60" align="center" label="序号">
      </el-table-column>
      <el-table-column prop="userName" label="用户名" width="130" align="center">
      </el-table-column>
      <el-table-column prop="loginAccount" label="登录账号" width="130" align="center">
      </el-table-column>
      <el-table-column prop="requestType" label="请求类型" width="130" align="center">
      </el-table-column>
      <el-table-column prop="requestMethod" label="请求路径" width="300" align="center">
      </el-table-column>
      <el-table-column prop="ipAddress" label="请求IP地址" width="210" align="center">
      </el-table-column>
      <el-table-column prop="createDate" label="请求时间" width="210" align="center">
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :page-sizes="[15, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="dataSize" align="center">
    </el-pagination>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import request from '@/utils/request'

export default {
  name: 'RecordIndex',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
  // 这里存放数据
    return {
      dataSize: 0,
      pageIndex: 1,
      pageSize: 15,
      SearchOrderVo: {
        loginAccount: ''
      },
      RecordList: [],
      baseRecord: '/record-basic',
      loading: true
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async searchRecordByConditions () {
      await request({
        url: this.baseRecord + `/record-list/${this.pageIndex}/${this.pageSize}`,
        method: 'get',
        params: this.SearchOrderVo
      }).then(res => {
        this.dataSize = res.data.data.size
        this.RecordList = res.data.data.data
        this.loading = false
      })
    },
    handleSizeChange (val) {
      this.loading = true
      this.pageSize = val
      this.searchRecordByConditions()
    },
    handleCurrentChange (val) {
      this.pageIndex = val
      this.loading = true
      this.searchRecordByConditions()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.searchRecordByConditions()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.record {
    background-color: #fff;
    height: 690px;
    padding: 20px 20px;
    border-radius: 30px;
  }
  .el-table {
    margin-top: 20px;
  }

  .el-pagination {
    margin-top: 20px;
  }
</style>
